<template>
  <div style="padding: 30px">
    <a-descriptions bordered :column="2">
      <div slot="title">
        <a-row type="flex">
          <a-col flex="100px" @click="goBack"
            ><div style="text-align: left; cursor:pointer;"><a-icon type="arrow-left" /></div
          ></a-col>
          <a-col flex="auto">
            <a-icon
              type="left"
              style="margin-right: 30px"
              @click="getBlockByNumber(block.number - 1)"
            />
            <span>Block #{{ block.number }}</span>
            <a-icon
              type="right"
              style="margin-left: 30px"
              @click="getBlockByNumber(block.number + 1)"
            />
          </a-col>
        </a-row>
      </div>
      <a-descriptions-item label="Timestamp">
        {{ block.timestamp }}
      </a-descriptions-item>
      <a-descriptions-item label="Size">
        {{ block.size }} bytes
      </a-descriptions-item>
      <a-descriptions-item label="Tx Count">
        {{ block.transactions.length }}
      </a-descriptions-item>
      <a-descriptions-item label="Gas Used">{{
        block.gasUsed
      }}</a-descriptions-item>
      <a-descriptions-item label="Gas Limit">
        {{ block.gasLimit }}
      </a-descriptions-item>
      <a-descriptions-item label="Difficulty">
        {{ block.difficulty }}
      </a-descriptions-item>
      <a-descriptions-item label="Block Hash" :span="2">
        {{ block.hash }}
        <a-icon type="copy" @click="copy(block.hash)"/>
      </a-descriptions-item>
      <a-descriptions-item label="Nonce" :span="2">
        {{ block.nonce }}
      </a-descriptions-item>
      <a-descriptions-item label="Parent Hash" :span="2">
        <a @click="getBlockByHash(block.parentHash)">{{ block.parentHash }}</a>
        <a-icon type="copy" @click="copy(block.parentHash)"/>
      </a-descriptions-item>
      <a-descriptions-item label="Extra Data" :span="2">
        {{ block.extraData }}
      </a-descriptions-item>
      <a-descriptions-item label="TX Hash" v-if="block.transactions.length">
        <div v-for="(item, index) in block.transactions" :key="index">
          <router-link
            :to="{ name: 'Transaction', query: { hash: item.hash } }">
            {{ item.hash }}
          </router-link>
          <a-icon type="copy" @click="copy(item.hash)"/>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>


<script>
import Constant from "../utils/Constant";
import Mixin from "../components/Mixin.vue";
export default {
  mixins: [Mixin],
  data() {
    return {
      block: {
        transactions: [],
      },
    };
  },

  created() {
    console.log("created");
    console.log(this.$route.query);
    if (this.$route.query.hash) {
      this.getBlockByHash(this.$route.query.hash);
    } else if (this.$route.query.number) {
      this.getBlockByNumber(this.$route.query.number);
    } else {
      this.getBlockByHash(
        "0x91a4739f882844d60c98da786654bfceb92eaf3eb139ee2b6c1af51e3d1d1438"
      );
    }
  },
  methods: {
    getBlockByNumber(blockNumber) {
      let url = Constant.BLOCK_NUMBER_URL + blockNumber;
      this.$http.get(url).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code == "01") {
            this.block = resp.data.result;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getBlockByHash(blockHash) {
      let url = Constant.BLOCK_HASH_URL + blockHash;
      this.$http.get(url).then(
        (resp) => {
          console.log(resp);
          if (resp.data.code == "01") {
            this.block = resp.data.result;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    toTransaction(txHash) {
      console.log(txHash);
      this.$router.push({
        name: "Transaction",
        params: {
          hash: txHash,
        },
      });
    },
    goBack() {
      console.log("go back");
      this.$router.go(-1);
    },
    copy(data) {
      console.log("copy", data)
      Constant.copyToClipboard(data, () => {
         this.$message.success(data + " Copied!")
      });
    },
  },
};
</script>
